<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>福利类型数量前十占比图&不同学历与求职人数占比图</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/theme/dark.js"></script>
    <script src="../static/theme/my_theme.js"></script>
    <script src="../static/theme/vintage.js"></script>
    <style>
        .chart-group{
            width: 100%;
            padding: 50px;
            display: flex;
            justify-content: space-between;
            margin: auto;
            box-sizing: border-box;
        }
        .chart1{
            width: 700px;
            height: 450px;
        }
        .chart2{
            width: 700px;
            height: 450px;
        }
    </style>
</head>
<body>
<div class="chart-group">
    <div class="chart1"></div>
    <div class="chart2"></div>
</div>
<script>
    // 初始化echarts
    var myCharts1 =  echarts.init(document.querySelector('.chart1'),'vintage')
    var myCharts2 =  echarts.init(document.querySelector('.chart2'),'vintage')
    // 获取视图函数传入数据并转换成json格式
    var wel_count = {{ wel_count|tojson }}
    var edu_count = {{ edu_count|tojson }}
    var value = []
    function getOption(data,desc){
        var option = {
        title:{
          text : desc,
          textStyle:{
              fontFamily:'楷体',
              fontSize:21
          },

        },
        tooltip:{
          trigger:'item',
          triggerOn:'mousemove',
          formatter:function(rst){
              if(desc=="工作经验的人数分布图"){
                    return '福利类型：'+rst.name+'<br>'+'企业数量：'+rst.value+'个'+'<br>'+'占比：'+rst.percent+"%"
                }else{
                    return '学历：'+rst.name+'<br>'+'所需岗位：'+rst.value+'人'+'<br>'+'占比：'+rst.percent+"%"
                }
          }
        },
        legend:{
            name:['人数占比'],
            orient: 'vertical',
            bottom:10,
            right:10,

        },
        series:[
            {
                name:'人数占比',
                type:'pie',
                data:data,
                label:{
                    show:true
                },
                roseType:'radius',
                selectedMode:'multiple',
                selectedOffset: 10
            }
        ]
    }
        return option
    }
    var option1 = getOption(wel_count,'福利类型数量前十占比')
    var option2 = getOption(edu_count,'不同学历人数占比')
    myCharts1.setOption(option1)
    myCharts2.setOption(option2)
</script>
</body>
</html>